import React, { Component } from 'react';
import Small from './Small'

class Big extends Component {
  constructor(){
    super();
    this.state = {
      msg: '天冷加衣！',
      isShow: true
    }
    console.log('1-初始化');
    // 在构造函数中调用函数
    this.changeMsg();
    this.SmallRef = React.createRef();
  }
  // 第二个生命周期函数-做用是根据props修改state
  static getDerivedStateFromProps(props, state) {
    console.log('第二个生命周期函数');
    console.log(props, state);
    return null
  }
  changeMsg() {
    console.log(333);
    this.setState({
      msg: '多喝热水'
    })
  }
  componentDidMount() {
    // 在这个函数中发请求获取数据，修改state
    console.log('4-组件已经安装成功');
    // 打印ref对应的值，是一个组件
    console.log(this.SmallRef);
  }
  toggle() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
  render() {
    console.log('3-渲染');
    return (
      <div>
        <p>我是父组件</p>
        <button onClick={()=>this.changeMsg()}>修改msg</button>
        <button onClick={()=>this.toggle()}>切换子组件</button>
        {this.state.isShow ? <Small ref={this.SmallRef} msg={this.state.msg}></Small>: null}
      </div>
    );
  }
}

export default Big;
